<template>
    <div class="unit1">
      <div class="look">
        <el-input
          v-model="communityname"
          placeholder="小区名称"
          style="width: 250px; margin-right:20px;"
        ></el-input>
        <el-input
          v-model="unitname"
          placeholder="单元名称"
          style="width: 250px;margin: 0 10px;"
        ></el-input>
        <div class="block">
          <el-date-picker
            v-model="createDt"
            align="right"
            type="date"
            placeholder="建设时间"
            :picker-options="pickerOptions"
            style="width: 250px;margin: 0 10px;"
          >
          </el-date-picker>
        </div>
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          style="width: 250px;margin: 0 10px;"
        >
          <el-form-item>
            <el-select v-model="type" placeholder="选择状态">
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-button
          icon="el-icon-search"
          type="primary"
          style="height: 32px; margin-left: 120px;"
          @click="getList"
        ></el-button>
        <el-button
          icon="el-icon-plus"
          type="success"
          style="height: 32px; margin-left: 20px;"
          @click="add"
        >录入</el-button>
        <el-button
          icon="el-icon-refresh-right"
          type="primary"
          style="height: 32px; margin-left: 20px;"
          @click="resetSearch"
        >重置</el-button>
      </div>
      <div class="info">
        <el-table :data="list" border style="width: 100%">
          <el-table-column
            prop="communityname"
            label="小区名称"
            width="300"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="unitname"
            label="单元名称"
            width="300"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="unitnum" label="栋数" width="180" align="center">
          </el-table-column>
          <el-table-column
            prop="createtime"
            label="建设时间"
            width="300"
            align="center"
          >
            <template slot-scope="scope">
              {{ formatDate(scope.row.createtime) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="unitstatus"
            label="状态"
            width="180"
            align="center"
          >
            <template slot-scope="scope">
              {{ convertStatus(scope.row.unitstatus) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="editFun(scope.row)" size="small" type="primary" plain>详情</el-button>
              <el-button
                type="danger"
                size="small"
                @click="showDeleteDialog(scope.row.id)"
                plain
              >归档</el-button>
              <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose"
              >
                <span>确认永久删除该信息吗</span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="delFun">确 定</el-button>
                </span>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
        <div class="bock">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [
            {
              text: "今天",
              onClick(picker) {
                picker.$emit("pick", new Date());
              },
            },
            {
              text: "昨天",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", date);
              },
            },
            {
              text: "一周前",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", date);
              },
            },
          ],
        },
        createDt: "",
        formInline: {
          user: "",
          region: "",
        },
        typeList: [
          {
            text: "已建成",
            value: "1",
          },
          {
            text: "未建成",
            value: "2",
          },
        ],
        list: [],
        type: "",
        communityname: "",
        unitname: "",
        size: 10,
        total: 0,
        currentPage4: 1,
        dialogVisible: false,
        deleteId: null,
        token:
          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidXNlcm5hbWUiOiJhZG1pbiIsImVtYWlsIjoiMjQ1MzMxNzM1N0BxcS5jb20iLCJoZWFkIjoiMjAyNTAyMTIxNzE0Mjc0NTAxMjk2LmpwZyIsInR5cGUiOiIxIiwiaWF0IjoxNzM5NDA3ODYzLCJleHAiOjE3Mzk0OTQyNjN9.D6CA9IqNJf4QpQiJhT5vH_L8uC4dDt5-qFD7ywdNkfA",
      };
    },
    created() {
      this.getList();
    },
    methods: {
      async getList() {
        try {
          const params = new URLSearchParams({
            communityname: this.communityname,
            unitname: this.unitname,
            createDt: this.formatCreateDt(this.createDt),
            value: this.type,
            currPage: this.currentPage4,
            pageNum: this.size,
            token: this.token
          });
          let res = await this.$axios.get(`house/searchList?${params.toString()}`);
          console.log(res.data.data);
          this.total = res.data.total;
          this.list = res.data.data;
        } catch (error) {
          console.error('获取列表失败', error);
          this.$message.error('获取列表失败，请稍后重试');
        }
      },
      editFun(row) {
        console.log('查看详情', row);
      },
      showDeleteDialog(id) {
        this.dialogVisible = true;
        this.deleteId = id;
      },
      handleClose(done) {
        done();
      },
      async delFun() {
        try {
          const params = new URLSearchParams({
            id: this.deleteId,
            token: this.token
          });
          await this.$axios.get(`house/delunitList?${params.toString()}`);
          this.dialogVisible = false;
          this.getList();
        } catch (error) {
          console.error('归档失败', error);
          this.$message.error('归档失败，请稍后重试');
        }
      },
      add(){
        this.$router.push({
                    name: 'add'
                })
      },
      handleSizeChange(newSize) {
        this.size = newSize;
        this.getList();
      },
      handleCurrentChange(newPage) {
        this.currentPage4 = newPage;
        this.getList();
      },
      formatDate(date) {
        const d = new Date(date);
        const year = d.getFullYear();
        const month = String(d.getMonth() + 1).padStart(2, '0');
        const day = String(d.getDate()).padStart(2, '0');
        const hours = String(d.getHours()).padStart(2, '0');
        const minutes = String(d.getMinutes()).padStart(2, '0');
        const seconds = String(d.getSeconds()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
      formatCreateDt(date) {
        if (!date) return '';
        const d = new Date(date);
        const year = d.getFullYear();
        const month = String(d.getMonth() + 1).padStart(2, '0');
        const day = String(d.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      },
      convertStatus(unitstatus) {
      if (unitstatus === 1 || unitstatus === "1") {
        return "已建成";
      } else if (unitstatus === 2 || unitstatus === "2") {
        return "未建成";
      }
      return "";
    },
      resetSearch() {
        this.communityname = "";
        this.unitname = "";
        this.createDt = "";
        this.type = "";
        this.currentPage4 = 1;
        this.getList();
      }
    },
  };
  </script>
  
  <style scoped>
  .look {
    display: flex;
  }
  .look input {
    width: 250px;
    height: 36px;
    margin: 0 10px;
  }
  </style>